<template>
  <div class="app">
    <h2>Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/" active-class="light">首页</RouterLink>
      <RouterLink :to="{ name: 'xinwen' }" active-class="light"
        >新闻</RouterLink
      >
      <RouterLink :to="{ path: '/about' }" active-class="light"
        >关于</RouterLink
      >
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { RouterView, RouterLink } from "vue-router";
</script>
<style>
.light {
  color: red;
  background-color: rgb(255, 161, 161);
}
</style>
